<template>
	<view class="container">
		<view class="waterfall_left">
			<view class="waterfall_item" v-for="(item,index) in listLeft" :key="index"
				@click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
				<view class="item_img">
					<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
					<zero-lazy-load :image="item['WorksUrls'].length != 0 ?item['WorksUrls'][0]: errorImg"
						:imgMode='imgMode' @load='considerPush' @error='considerPush'></zero-lazy-load>
				</view>
				<view class="worksInfos" style="display:flex;justify-content:start;align-items: start;"
					@click="gotoArtiter(item.Publicer.UserID)">
					<view class="worksHeadPic">
						<image :src="item.Publicer.WxHeadPic"></image>
					</view>
					<view class="worksInfo">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
							<view style="flex:2;">
								<view class="worksName">
									<view style="overflow: hidden;text-overflow: ellipsis;max-width: 150rpx;">
										{{item.Publicer.NickName}}
									</view>
									<image v-if="item.Publicer.UserSex == 1" :src="baseUrl + 'icon/boy.png'"
										style="width:20rpx;height:20rpx;margin-left: 8rpx;"></image>
									<image v-else :src="baseUrl + 'icon/girl.png'"
										style="width:25rpx;height:25rpx;margin-left: 8rpx;"></image>
								</view>
							</view>
							<view class="artState">
								<view style="font-size:18rpx;" v-if="item.Publicer.isOnline == 1">在线</view>
								<view style="font-size:18rpx;" v-else>
									{{ $common.timeDiff(item.Publicer.onlineTime,new Date()) }}
								</view>
							</view>
						</view>
						<view class="worksLabel">
							<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.PublicRoles.length-1" style="padding: 0 3rpx;">·</text>
								<text v-else style="padding: 0 5rpx;"> | </text>
							</text>
							<text class="artAddr">{{ item.Publicer.UserCity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="waterfall_right">
			<view class="waterfall_item" v-for="(item,index) in listRight" :key="index"
				@click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
				<view class="item_img">
					<!-- <image :src="item.url" mode="widthFix" @load="considerPush"></image> -->
					<zero-lazy-load :image="item['WorksUrls'].length != 0 ?item['WorksUrls'][0]:errorImg"
						:imgMode='imgMode' @load='considerPush' @error='considerPush'></zero-lazy-load>
				</view>
				<view class="worksInfos" style="display:flex;justify-content:start;align-items: start;"
					@click="gotoArtiter(item.Publicer.UserID)">
					<view class="worksHeadPic">
						<image :src="item.Publicer.WxHeadPic"></image>
					</view>
					<view class="worksInfo">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;">
							<view style="flex:2;">
								<view class="worksName">
									<view style="overflow: hidden;text-overflow: ellipsis;max-width: 150rpx;">
										{{item.Publicer.NickName}}
									</view>
									<image v-if="item.Publicer.UserSex == 1" :src="baseUrl + 'icon/boy.png'"
										style="width:20rpx;height:20rpx;margin-left: 8rpx;"></image>
									<image v-else :src="baseUrl + 'icon/girl.png'"
										style="width:25rpx;height:25rpx;margin-left: 8rpx;"></image>
								</view>
							</view>
							<view class="artState">
								<view style="font-size:18rpx;" v-if="item.Publicer.isOnline == 1">在线</view>
								<view style="font-size:18rpx;" v-else>
									{{ $common.timeDiff(item.Publicer.onlineTime,new Date()) }}
								</view>
							</view>
						</view>
						<view class="worksLabel">
							<text v-for="(roleitem,roleindex) in item.PublicRoles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.PublicRoles.length-1" style="padding: 0 3rpx;">·</text>
								<text v-else style="padding: 0 5rpx;"> | </text>
							</text>
							<text class="artAddr">{{ item.Publicer.UserCity }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		name: "zero-waterfall",
		emit: [],
		props: {
			// 需要在使用页面 onPageScroll 传进来
			list: {
				type: Array,
				required: true,
				default: []
			},
			// 图片裁剪模式
			imgMode: {
				type: String,
				default: 'widthFix'
			},
			isExecutes: {
				type: Boolean,
				default: false
			},
			oneRendering: {
				type: Boolean,
				default: false
			},
			isChangeTab: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				errorImg: '',
				listLeft: [],
				listRight: [],
				newList: [],
				isExecute: false,
				temporaryList: [],
				baseUrl: '',
				isShowChangeData: false
			}
		},
		watch: {
			isChangeTab(newValue, oldValue) {
				this.isShowChangeData = newValue;
			},
			list: {
				deep: true,
				handler(newValue, oldValue) {
					// console.log('第N次执行~');
					// console.log('newValue', newValue)
					// console.log('oldValue', oldValue)
					// console.log('isChangeTab', this.isChangeTab)

					// if (isExecute) {
					// 	this.temporaryList.push(...newValue)
					// 	// 截取形成一个新的数组
					// 	this.newList = this.temporaryList.slice(oldValue.length);
					// } else {
					// 	this.newList = newValue.slice(oldValue.length);
					// }
					// if (this.isExecutes == false) {
					// if (newValue[0].WorksUrls[0] != this.newList[0].WorksUrls[0]) {
					// 	this.newList = newValue;
					// } else {
					// 	this.newList = newValue.slice(oldValue.length);
					// }
					// if (!this.isShowChangeData) {
					if (newValue[0].WorksUrls[0] == oldValue[0].WorksUrls[0]) {
						// console.log('执行 if')
						this.newList = newValue.slice(oldValue.length);
					} else {
						// console.log('执行 else')
						this.listLeft = [];
						this.listRight = [];
						this.newList = [...newValue];
					}
					// } else {
					// 	this.newList = [...newValue];
					// }

					this.considerPush()
					// }

				}
			}

		},
		mounted() {
			this.baseUrl = this.$baseUrl;
			this.init()
		},
		methods: {
			// 触发重新排列
			init() {
				// console.log('首次执行~');
				this.newList = [...this.list];
				this.listLeft = [];
				this.listRight = [];
				if (this.newList.length != 0) {
					this.listLeft.push(this.newList.shift()); //触发排列
					// this.listRight.push(this.newList[1]); //触发排列
				}

				// console.log('listLeft', this.listLeft)

			},
			async considerPush() {
				// console.log('执行了！~')
				// this.isExecute = false;
				// if (!this.isExecute) return;
				if (this.newList.length == 0) return; //没有数据了
				let leftH = 0,
					rightH = 0; //左右高度
				var query = uni.createSelectorQuery().in(this);

				query.selectAll('.waterfall_left').boundingClientRect()
				query.selectAll('.waterfall_right').boundingClientRect()

				// 等待 exec 完成
				let res = await new Promise((resolve) => {
					query.exec(resolve);
				});

				leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
				rightH = res[1].length != 0 ? res[1][0].height : 0;

				// if (this.oneRendering) {
				// 	// console.log('执行执行执行')
				// 	this.listLeft.push(this.newList.shift());
				// }

				if (leftH == rightH || leftH < rightH) {
					// 相等 || 左边小  
					this.listLeft.push(this.newList.shift());
				} else {
					// 右边小
					this.listRight.push(this.newList.shift());
				}
				// this.temporaryList = [];
				// this.isExecute = true;
				// this.$emit('change', true);
				// // console.log("listLeft", this.listLeft)
				// // console.log("listRight", this.listRight)
			},
			// 计算排列
			// considerPush() {
			// 	if (this.newList.length == 0) return; //没有数据了
			// 	let leftH = 0,
			// 		rightH = 0; //左右高度
			// 	var query = uni.createSelectorQuery().in(this);

			// 	query.selectAll('.waterfall_left').boundingClientRect()
			// 	query.selectAll('.waterfall_right').boundingClientRect()
			// 	query.exec(res => {
			// 		// // console.log('结果',res)
			// 		leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
			// 		rightH = res[1].length != 0 ? res[1][0].height : 0;
			// 		// // console.log('结果',leftH,rightH)
			// 		if (leftH == rightH || leftH < rightH) {
			// 			// 相等 || 左边小  
			// 			this.listLeft.push(this.newList.shift());
			// 		} else {
			// 			// 右边小
			// 			this.listRight.push(this.newList.shift());
			// 		}
			// 	});
			// },

		}

	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.waterfall_left,
	.waterfall_right {
		width: 48%;
		// border-radius: 20rpx;
		// overflow: hidden;
	}

	.waterfall_item {
		width: 100%;
		margin: 10rpx 0 10rpx 0;
		background-color: #FFFFFF;
		// border-radius: 15rpx;
		// overflow: hidden;
		border-radius: 15rpx;
		overflow: hidden;

		.item_img {
			width: 100%;

			image {
				width: 100%;
				overflow: hidden;
			}
		}

		.item_info {
			padding: 10rpx 0;

			.item_info_title {
				color: #333333;
				font-size: 32rpx;
				padding: 10rpx 0;
			}

			.item_info_note {
				color: #666666;
				font-size: 28rpx;
			}
		}

	}

	.worksInfos {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		margin-top: 20rpx;
	}

	.worksHeadPic {
		float: left;
		width: 50rpx;
		height: 50rpx;
		background-color: #CCC;
		/* background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658'); */
		background-position: center;
		background-size: cover;
		border-radius: 40rpx;
		margin-top: 10rpx;
	}

	.worksHeadPic image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
	}

	.worksInfo {
		width: 80vw;
		margin-left: 10rpx;
	}

	.worksName {
		/* font-size:24rpx; */
		font-size: 22rpx;
		display: inline-block;
		vertical-align: middle;
		line-height: 1.2;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

	}

	.worksLabel {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		font-size: 18rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.artState {
		/* width:100rpx; */
		flex: 1;
		float: right;
		text-align: right;
		color: #999;
		font-size: 24rpx;
		margin-right: 2rpx;
	}
</style>